<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>编辑菜单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<link rel="stylesheet" href="../../libme/modules/dtree/dtree.css">
	<link rel="stylesheet" href="../../libme/modules/dtree/font/dtreefont.css">
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form ok-form" lay-filter = "menu-edit">
		<input type="hidden" name="menuId" value="">
		<div class="layui-form-item">
			<label class="layui-form-label">菜单名称</label>
			<div class="layui-input-block">
				<input type="text" name="title" placeholder="请输入菜单名称" autocomplete="off" class="layui-input" lay-verify="required">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">菜单类型</label>
			<div class="layui-input-block">
				<input type="radio" name="type" value="M" title="目录" lay-filter="type">
				<input type="radio" name="type" value="C" title="菜单" lay-filter="type">
				<input type="radio" name="type" value="F" title="按钮" lay-filter="type">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">菜单Code</label>
			<div class="layui-input-block">
				<input type="text" name="menuCode" placeholder="请输入菜单Code" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">菜单链接</label>
			<div class="layui-input-block">
				<input type="text" name="href" placeholder="请输入菜单链接" autocomplete="off" class="layui-input" lay-verify="required">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">图标类型</label>
			<div class="layui-input-block">
				<input type="radio" name="fontFamily" value="ok-icon" title="ok-icon">
				<input type="radio" name="fontFamily" value="layui-icon" title="默认" disabled>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">图标样式</label>
			<div class="layui-input-block">
				<input type="radio" name="icon" value="ok-icon-file" title="ok-icon-file">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">上级菜单</label>
			<div class="layui-input-inline">
				<ul id="menus" class="dtree" data-id="0" ></ul>
			</div>
			<button type="button" class="layui-btn layui-btn-primary" id="mreset">顶级目录</button>
		</div>



		<div class="layui-form-item">
			<label class="layui-form-label">权限</label>
			<div class="layui-input-inline">
				<ul id="permissions" class="dtree" data-id="0" ></ul>
			</div>
			<button type="button" class="layui-btn layui-btn-primary"  id="preset">清空权限</button>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">排序号码</label>
			<div class="layui-input-block">
				<input type="text" name="sortno" placeholder="请输入0 - 999 的任意数值" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<input type="text" name="remark" placeholder="请输入备注" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
				<button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/pages/body.js"></script>
<script type="text/javascript">
	layui.use(['element', 'form', 'jquery', "okLayer", "okUtils", "okMock","api","dtree"], function () {
		var element = layui.element;
		var form = layui.form;
		var $ = layui.jquery;
        let dtree = layui.dtree;
        let okMock = layui.okMock;
        let api = layui.api;

		okLoading.close();
		form.on('submit(edit)', function (data) {
            if(data.parentId != undefined && data.parentId == data.menuId) {
                api.yellowQuestionMsg('请重新选择一个上级菜单。');
                //return false;
            }
            // console.log(data);
            // console.log(data.menuId);
            // console.log(data.parentId);

			api.request({
				url: okMock.api.menu.updateAndGrant,
				where:data.field
			},function (resp, stat) {
				layer.msg("修改成功！", {icon: 6, time: 1000, anim: 4}, function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
            })
			return false;
		});

        form.on('radio(type)', function(data){
            //console.log(data.elem); //得到radio原始DOM对象
            //console.log(data.value); //被点击的radio的value值
            const v = data.value;
            if(v == 'M'){
                $('input[name="menuCode"]').parents('.layui-form-item').addClass('layui-hide');
                //$('input[name="href"]').val('#').prop('disabled',true)//addClass('layui-disabled');
                $('input[name="href"]').val('#').parents('.layui-form-item').addClass('layui-hide');
                $('#menus').parents('.layui-form-item').addClass('layui-hide');
                mReset();
            }else if(v == 'C'){//菜单
                $('input[name="menuCode"]').parents('.layui-form-item').addClass('layui-hide');
                //$('input[name="href"]').val('').prop('disabled',false)//.removeClass('layui-disabled');
                $('input[name="href"]').val('').parents('.layui-form-item').removeClass('layui-hide');
                $('#menus').parents('.layui-form-item').removeClass('layui-hide');
            }else if(v == 'F'){//按钮
                $('input[name="menuCode"]').parents('.layui-form-item').removeClass('layui-hide');
                //$('input[name="href"]').val('#').prop('disabled',true)//.addClass('layui-disabled');
                $('input[name="href"]').val('#').parents('.layui-form-item').addClass('layui-hide');
                $('#menus').parents('.layui-form-item').removeClass('layui-hide');
            }
        });

        var menuDtree = dtree.renderSelect({
            //  obj: $(layero).find("#openTree1"),    如果直接用elem加载不出来，则可以使用这个方式加载jquery的DOM
            elem: "#menus",
            url: okMock.api.menu.dtree,
            dataStyle: "layuiStyle",
            dataFormat: "list",
            response:{
                statusCode: 100,
            },
            line: true,
            width: "100%",
            selectCardHeight: "150",
            selectInputName: {
                nodeId: "parentId",
                //context: "context"
            },
            selectTips: "顶级目录",
            done: function(res, $ul, first){
                //if(first) { }
                var pid = api.getHTMLQueryParamValByParamKey('parentId');
                dtree.selectVal("menus", pid);
                // 更新radio
                //form.render('radio','menu-edit');
            }
        });

        var permDtree = dtree.renderSelect({
            elem: "#permissions",
            url: okMock.api.permission.dtree,
            dataStyle: "layuiStyle",    //使用layui风格的数据格式（使用"defaultStyle"出现无法加载数据情况）
            dataFormat: "list",         //配置data的风格为list
            response:{//返回JSON字段与DTree字段不一致时需要使用
                statusCode: 100, //返回码
            },//修改response中返回数据的定义
            selectInputName: {
                nodeId: "permissionId",
                context: "permissionName"
            },
            initLevel : 1,
            line: true,
            width: "100%",
            //checkbar:true, //开启复选框
            //checkbarType: "only", // 默认就是all，其他的值为： no-all  p-casc   self  only
            //checkbarData: "halfChoose", // "choose" 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
            done: function(res, $ul, first){
                //if(first) {}
                var pid = api.getHTMLQueryParamValByParamKey('permId');
                //layer.msg('pid = ' + pid );
                dtree.selectVal("permissions", pid);
            }
        });

        $("#reset").click(function(){
            mReset();
            pReset();
        });
        $("#mreset").click(function(){
            mReset();
        });
        $("#preset").click(function(){
            pReset();
        });

        function mReset() {
            menuDtree.selectResetVal();
        }

        function pReset() {
            permDtree.selectResetVal();
        }

        $("body").on("click", function(event){
            $("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
            $("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
        });

        $(function () {//页面加载
            //showPermissionSelectBox()
            //showMenuSelectBox()
			//form.render(null, 'permission')
        })
	})
	function doShowMenuType() {
		layui.use('form', function () {
		    var form = layui.form;
            form.render('radio','menu-edit');
        })
    }
</script>
</body>
</html>
